<template>
	<view class="wrap">
		<view class="price-wrap">
			<view class="price">
				￥{{dataObj.amount}}
			</view>
			<view>
				{{countdown2}}
			</view>
		</view>
		
		<view class="inner-wrap">
			<view>
				出售人：
			</view>
			<view class="chushouren">
				姓名：{{dataObj.other_name}} 手机：{{dataObj.other_account}}
			</view>
			
			<view>
				收款方式：
			</view>
			<view class="method-wrap">
				<view style="background:#f5f5f5;padding:34rpx 30rpx;border-radius:19rpx;">
					<view class="btn-wrap">
							<view style="border-right:1rpx solid #5c5c5c;border-top-left-radius: 13rpx;border-bottom-left-radius: 13rpx;" class="item" @click="tabClick(1)" :class="{active: nowindex == 1}">微信</view>
							<view style="border-right:1rpx solid #5c5c5c;" class="item" @click="tabClick(2)" :class="{active: nowindex == 2}">支付宝</view>
							<view style="border-top-right-radius: 13rpx;border-bottom-right-radius: 13rpx;" class="item" @click="tabClick(3)" :class="{active: nowindex == 3}">银行卡</view>
						</view>
						
						<view v-show="nowindex==1" style="padding:10rpx 0 6rpx 0;">收款账号：{{dataObj.wx_account}}</view>
						<view v-show="nowindex==1" class="shoukuan-wrap">
							<view class="label">
								收款码：
							</view>
							<view class="erweima">
								<image @click="download"  :src="dataObj.wx_qrcode" mode=""></image>
							</view>
						</view>
						
						<view v-show="nowindex==2" style="padding:10rpx 0 6rpx 0;">收款账号：{{dataObj.alipay_account}}</view>
						<view v-show="nowindex==2" class="shoukuan-wrap">
							<view class="label">
								收款码：
							</view>
							<view class="erweima">
								<image :src="dataObj.alipay_qrcode" mode=""></image>
							</view>
						</view>
						
						
						<view v-show="nowindex==3" style="padding:10rpx 0 6rpx 0;">银行卡号：{{dataObj.bank_card}}</view>
						<view v-show="nowindex==3" style="padding:10rpx 0 6rpx 0;">开户行：{{dataObj.bank_of_deposit}}</view>
						<view v-show="nowindex==3" style="padding:10rpx 0 6rpx 0;">开户人：{{dataObj.bank_user}}</view>
					</view>
					
				</view>
				<view style="padding:10rpx 0 6rpx 0;">销售凭证</view>
				<view class="xiaoshou-wrap" @click="chooseImg('img_url')">
					<image v-if="!img_url" src="/static/xiaoshoupingzheng.png" mode=""></image>
					<image v-if="img_url" :src="img_url" mode=""></image>
				</view>
				<view >
					<view v-for="(item,index) in dataObj.note" :key="index">
						{{item}}
					</view>
				</view>
				
				<view class="sub-data" @click="suesub">
					确认提交
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	function leftTimer(leftTime){
	 if(leftTime<=0){
	 		 return '00:00:00'
	 }
	 var days = parseInt(leftTime / 1000 / 60 / 60 / 24 , 10); //计算剩余的天数 
	 var hours = parseInt(leftTime / 1000 / 60 / 60 % 24 , 10); //计算剩余的小时 
	 var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);//计算剩余的分钟 
	 var seconds = parseInt(leftTime / 1000 % 60, 10);//计算剩余的秒数 
	 days = checkTime(days); 
	 hours = checkTime(hours); 
	 minutes = checkTime(minutes); 
	 seconds = checkTime(seconds); 
	return `${hours}:${minutes}:${seconds}`
	
	} 
	function checkTime(i){ //将0-9的数字前面加上0，例1变为01 
	 if(i<10) 
	 { 
	 i = "0" + i; 
	 } 
	 return i; 
	}
	export default{
		data(){
			return{
				img_url:'',
				data:{
					
				},
				countdown2:'',
				timer:'',
				dataObj:{
					note:[] 
				},
				nowindex:1
			}
		},
		onLoad(options) {
			this.data=JSON.parse(options.data)
			this.getData()
		},
		onunload(){
			let that=this
			clearInterval(that.timer)
		},
		methods:{
			download(){
				
				let that=this
				
				uni.saveImageToPhotosAlbum({
				    filePath:that.dataObj.wx_qrcode,
				    success: function () {
				        uni.showToast({
				            title: '保存收款码成功',  
				            mask: false,  
				            duration:4000, 
				        });  
				    }
				});
				
			},
			chooseImg(type){
				
				let that=this
				
				uni.chooseImage({
					count:1,
					sizeType:'compressed',
					success: (res) => {
						const imgsFile=res.tempFilePaths
						uni.showLoading({
						    title: '正在上传'
						});
						const uper=uni.uploadFile({
							url: that.upUrl+'/api/groupbuy/up_p2p_img',
							filePath:imgsFile[0],
							name:'img',
							header:{  
								"Authorization": uni.getStorageSync("auth_token")
							},
							success:function(res){
								
								
								let data=JSON.parse(res.data)
								if(data.Code=='10200'){
									
									uni.showToast({
										title: "上传成功",
										icon: "none",
										duration:4000,
									});
									uni.hideLoading();
									that[type]=data.Data
									
									
									
								}
							}
						})
						//上传进度更新的方法
						// uper.onProgressUpdate((e)=>{
						// 	if(e.progress==100){
								
								
						// 	}else{
								
						// 	}
							
						// })
					}
				})
			
			},
			//
			
			suesub(){
				let that=this
				uni.showModal({
					title: '提示',
					content: '确认提交？',
					success: function (res) {
						if (res.confirm) {
							that.apipost('/api/groupbuy/sale_submit',{
								img_url:that.img_url,
								sale_id:that.data.id
							},true).then(res => {
								if(res.Code==10200){
									uni.showToast({
										title: res.Message,
										icon: "none",
										duration:4000,
									});
									
								}
							
							}).catch(err=>{
								console.log(err)
							});
								
								
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			getData(){
				let that=this
				
				that.apipost('/api/groupbuy/sale_detail',{
					id:that.data.id,
					
				},true).then(res => {
					if(res.Code==10200){
						let data=res.Data
						that.dataObj=data
						that.img_url=data.voucher
						that.countdown2=leftTimer(that.dataObj.countdown)
						that.timer=setInterval(function(){
							that.countdown2=leftTimer(that.dataObj.countdown)
							
							that.dataObj.countdown=that.dataObj.countdown-1000
							
						},1000)
						
					}
					
				}).catch(err=>{
					console.log(err)
				});
			},
			tabClick(type){
				this.nowindex=type
			}
		}
	}
</script>

<style>
	.sub-data{
		width:554rpx;
		height:76rpx;
		background:#ed6a18;
		color:#fff;
		display:flex;
		align-items: center;
		justify-content: center;
		
		border-radius:120rpx;
		margin:0 auto;
		margin-top:32rpx;
	}
	.xiaoshou-wrap{
		
		height:382rpx;
		border:1rpx solid #5c5c5c;
		
		box-sizing: border-box;
		border-radius:50rpx;
	}
	.xiaoshou-wrap uni-image{
		border-radius:50rpx;
	}
	.shoukuan-wrap .erweima{
		width:382rpx;
		height:382rpx;
		border:1rpx solid #5c5c5c;
		background:#fff;
		box-sizing: border-box;
		border-radius:40rpx;
	}
	.shoukuan-wrap .erweima uni-image{
		
		border-radius:40rpx;
	}
	.shoukuan-wrap{
		display:flex;
	}
	.btn-wrap .item{
		
		flex:1;
		height:90rpx;
		background:#fff;
		display:flex;
		align-items: center;
		justify-content: center;
	}
	.btn-wrap .active{
		background:#f58637;
		color:#fff;
	}
	.btn-wrap{
		border:1rpx solid #5c5c5c;
		display:flex;
		border-radius:13rpx;
	}
	.method-wrap{
		background:#fff;
		border:1rpx solid #5c5c5c;
		border-radius:19rpx;
	}
	.price-wrap .price{
		font-size:46rpx;
		padding:40rpx 0 50rpx 0;
	}
	page{
		background:url(/static/daixiaoshoudetail.png) no-repeat center 0 #f5f5f5;
		background-size:100% auto;
	}
	.price-wrap{
		text-align: center;
		color:#fff;
		font-size:32rpx;
		margin-bottom:80rpx;
	}
	.inner-wrap{
		width:692rpx;
		margin:0 auto;
		background:#fff;
		padding:52rpx 24rpx 20rpx 24rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
	}
	.chushouren{
		border:1rpx solid #6d6d6d;
		border-radius:10rpx;
		padding-left:48rpx;
		margin-top:10rpx;
		background:#f5f5f5;
		height:72rpx;
		display:flex;
		align-items: center;
		margin-bottom:40rpx;
	}
</style>